<template>
  <!-- 顶部 -->
  <div class="ls-header-container">
    <!-- 顶部时间 -->
    <div v-if="showDate" class="header-time">
      {{ dataTime.year }}年{{ dataTime.month }}月{{ dataTime.day }}日
      <span>{{ `${dataTime.hours}:${dataTime.minutes}:${dataTime.seconds}` }}</span>
      星期{{ weekData[dataTime.week] }}
    </div>
    <!-- 标题 -->
    <img class="header-title" src="@/assets/images/common/logo.png" />
    <!-- 返回 -->
    <div class="back" @click="jumpFun" v-if="back">
      <img src="../../assets/images/common/back.png" alt="" />
    </div>
  </div>
</template>

<script setup>
const weekData = ['日', '一', '二', '三', '四', '五', '六'];
let timer_1 = null;
onMounted(() => {
  dateFormat();
  // 1秒刷新一次
  timer_1 = setInterval(() => {
    dateFormat();
  }, 1000);
});
onBeforeUnmount(() => {
  clearInterval(timer_1);
});
// 时间展示
let date = null;
const showDate = ref(false);
const dataTime = reactive({
  week: 0,
  year: 'YYYY',
  month: 'MM',
  day: 'DD',
  hours: '00',
  minutes: '00',
  seconds: '00',
});
function dateFormat() {
  date = new Date();
  dataTime.week = date.getDay();
  dataTime.year = date.getFullYear();
  dataTime.month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
  dataTime.day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
  dataTime.hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
  dataTime.minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
  dataTime.seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
  showDate.value = true;
}

//返回
import { ref, defineProps } from 'vue';
import { useRouter } from 'vue-router';
const props = defineProps({
  back: Boolean,
  to: String,
});

const router = useRouter();
const jumpFun = (e) => {
  router.push(props.to);
};
</script>
<style lang="scss" scoped>
.ls-header-container {
  width: 100%;
  height: 90px;
  background-size: 100% 100%;
  background-image: url(/src/assets/images/common/header.png);
  position: relative;
  .header-time {
    padding: 16px 0 0 40px;
    color: #46ffff;
    font-size: 20px;
    span {
      margin: 0 10px;
    }
  }
  .back {
    position: absolute;
    top: 16px;
    right: 30px;
    cursor: pointer;
  }

  .header-title {
    width: 679px;
    height: 78px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}
</style>
